import React, { PureComponent } from 'react';
import { Drawer } from 'antd';

class MyDrawer extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            searchStorageList: [],
            searchKeyList:[],
        }
    }

    componentDidMount() {
        //获取 缓存中的数据，保存到 state中
        var data = JSON.parse(localStorage.getItem("search"));
        if (data !== null) {
            this.setState({ searchStorageList: data,searchKeyList:this.props.searchKeyList })
        }
    }

    render() {
        const { visible, keyword, showType, searchKeyList, searchList, changeKeyword, changeDrawerType, goList } = this.props
        const { searchStorageList } = this.state;
        return <div className="aa" style={{ touchAction: 'none' }}>
            <Drawer
                title=""
                placement="right"
                closable={false}
                width={"100%"}
                onClose={this.onClose}
                visible={visible}
            >
                <div>
                    <div>
                        <input type="text" placeholder="请输入搜索内容"
                            onChange={changeKeyword} value={keyword}
                        />
                        <button onClick={changeDrawerType}>取消</button>
                    </div>
                    {
                        showType ?
                            <ul className="main_s_key_con">{
                                searchKeyList.map((item) => <li key={item.code} style={item.isHighlight=== "1"?{background:'rgba(252,69,84,.1)',color:'#fc4554'}:{}}>
                                    {item.name}</li>)
                            }</ul> :
                            <ul >
                                {searchList.map((item, index) => 
                                  <li key={index}  
                                   onClick={() => { goList(item) }}>{item}</li>)}
                            </ul>
                    }
                    <div>
                        {
                            searchStorageList.length !== 0 ? searchStorageList.map((item, index) => <span key={index}>{item}</span>) : ""
                        }
                    </div>
                </div>
            </Drawer>
        </div>
    }
}

export default MyDrawer;